<template>
  <div class="child_create">
    <div class="top_treadcrumb">
      <span class="lander_detail_back" title="返回"
        ><svg class="icon" aria-hidden="true" @click="back">
          <use xlink:href="#icon-fanhuihong1"></use></svg
      ></span>
      <span v-if="this.actionType === 'add'">创建</span><span v-else-if="this.actionType === 'edit'">编辑</span><span v-else>查看</span>子包
    </div>
    <div class="child_content">
      <el-form :model="form" :rules="rules" ref="form" label-width="112px">
        <el-form-item
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="子包标识名称"
          prop="subPackageName"
        >
          <span v-if="actionType === 'detail'">{{ form.subPackageName }}</span>
          <el-input
            v-else
            placeholder="请填写子包标识名称"
            style="width: 240px;"
            v-model="form.subPackageName"
          ></el-input>
        </el-form-item>
        <el-form-item
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="所属母包"
          prop="parentPackageId"
        >
          <span v-if="actionType === 'detail' || actionType === 'edit'">{{
            form.parentPackageId || "-"
          }}</span>
          <el-select
            v-else
            style="width: 240px;"
            v-model="form.parentPackageId"
            filterable
            @change="mubaoChange"
            placeholder="请选择所属母包"
          >
            <el-option
              v-for="item in mubaoData"
              :key="item.id"
              :label="item.packagename + ' (' + item.id + ') - ' + clientTypeName(item.clienttype)"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="游戏分组"
          prop="groupsId"
        >
          <span>{{ form.groups || form.groupsId || "--" }}</span>
        </el-form-item>
        <el-form-item
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="类型"
          required
        >
          <span>{{ form.clientType || "--" }}</span>
        </el-form-item>
        <el-form-item
          v-if="roleType === 3"
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="推广商"
          prop="assistantAgencyId"
        >
          <span v-if="actionType === 'detail'">{{
            assistantagencyname || "-"
          }}</span>
          <el-select
            v-else
            style="width: 240px;"
            v-model="form.assistantAgencyId"
            filterable
            placeholder="请选择推广商"
            :disabled="form.packstatus === 1 || form.packstatus === 2"
          >
            <el-option
              v-for="item in assistantData"
              :key="item.id"
              :label="item.username + ' ( ' + item.id + ' )'"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="roleType === 1"
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="推广员"
          prop="assistantId"
        >
          <span v-if="actionType === 'detail'">{{
            assistantname || "-"
          }}</span>
          
          <el-select
            v-else
            style="width: 240px;"
            v-model="form.assistantId"
            placeholder="请选择推广员"
            filterable
            :disabled="form.packstatus === 1 || form.packstatus === 2"
          >
            <el-option
              v-for="person in assistantData"
              :key="person.id"
              :label="person.username"
              :value="person.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="第三方API"
          prop="thirdApiType"
          class="demo-form-inline"
          style="margin:0"
        >
          <span v-if="actionType === 'detail'">
            {{ thirdApiData(form.thirdApiType,form.thirdApiKey) }}
          </span>
          <div v-else>
            <el-select
              style="width: 240px;"
              v-model="form.thirdApiType"
              placeholder="请选择"
              clearable
              @change="thirdApiChange"
            >
              <el-option
                v-for="thired in thiredapiOption"
                :key="thired.id"
                :label="thired.name"
                :value="thired.id"
              > {{thired.name}} </el-option>
            </el-select>
            <el-form-item
              prop="thirdApiKey"
              class="demo-form-inline"
              v-if="form.thirdApiType"
            >
              <el-input
                placeholder="请输入APPkey"
                style="width: 240px;"
                v-model="form.thirdApiKey"
              ></el-input>
            </el-form-item>
            <div style="color:#e02020;line-height: 20px;">*编辑或清空APPKey操作，已关联的子包重新生成之后生效，请谨慎操作</div>
          </div>
        </el-form-item>
        <el-form-item
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="子包地址"
          prop="officialUrl"
        >
          <span v-if="actionType === 'detail' || actionType === 'edit'">{{
            form.officialUrl || "-"
          }}</span>
          <el-input
            v-else
            placeholder="请填写子包地址"
            style="width: 480px;"
            v-model="form.officialUrl"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          :class="actionType === 'detail' ? 'detail_item' : ''"
          label="推广地址"
          prop="h5url"
        >
          <span v-if="actionType === 'detail'">{{
            form.h5url || "-"
          }}</span>
          <el-input
            v-else
            placeholder="请填写推广地址"
            style="width: 480px;"
            v-model="form.h5url"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <span v-if="actionType === 'detail'">{{ form.remark || "-" }}</span>
          <el-input
            v-else
            style="width:832px;"
            type="textarea"
            placeholder="请输入"
            maxlength="150"
            v-model="form.remark"
            show-word-limit
          ></el-input>
        </el-form-item>
        <div style="text-align: center;padding-bottom: 28px;margin-top:60px;">
          <el-button style="width: 87px;" @click="cancel('form')">
            取消
          </el-button>
          <el-button
            v-if="$route.query.type === 'add'"
            style="width: 87px;"
            type="primary"
            @click="create('form')"
            >创建</el-button
          >
          <el-button
            v-if="$route.query.type === 'edit'"
            style="width: 87px;"
            type="primary"
            @click="edit('form')"
            >编辑</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
/*
 *@author: liujinming
 *@date: 2021-07-23 14:49:23
 *@description: 子包创建、编辑，详情
 */
import {
  createChild,
  getAllParentPackage,
  getAssistantList,
  getsubpackage,
  modifySubPackage
} from "@/api/child";
import { getCookie } from "@/utils/auth";
export default {
  name:'extensionChilddetail',
  data() {
    return {
      roleType: 0, //登录的角色类型 1 推广商 2 推广员 3代理商
      actionType: "detail",
      mubaoData: [], //所属母包数据
      assistantData: [], //推广员数据
      thiredapiOption:[ //第三方API
        {
          id: 1,
          name: "第三方API：友盟",
          label: "友盟"
        },
        {
          id: 2,
          name: "第三方API：热云",
          label: "热云"
        }
      ],
      assistantagencyname:'', //推广商名称
      assistantname:"", //推广员名称
      form: {
        subPackageName: "", //子包标识名称
        remark: "", //备注
        parentPackageId: "", //所属母包
        groups: "", //游戏分组
        groupsId: "", //游戏分组Id
        clientType: "--", //类型
        assistantAgencyId: undefined, //推广商ID
        assistantId: undefined, //推广员ID
        thirdApiType: '', //第三方api
        thirdApiKey:'', //第三方apikey
        h5url: "", //推广地址
        officialUrl: "", //子包地址
        packstatus:'' //生成状态
      },
      rules: {
        subPackageName: [
          { required: true, message: "请输入子包标识名称", trigger: "change" }
        ],
        assistantAgencyId: [
          { required: true, message: "请选择推广商", trigger: "change" }
        ],
        parentPackageId: [
          { required: true, message: "请选择所属母包", trigger: "change" }
        ],
        groupsId: [
          { required: true, message: "请选择游戏分组", trigger: "change" }
        ],
        thirdApiKey: [
          { required: true, message: "请输入APPKey", trigger: "change" }
        ],
      },
    };
  },
  created() {
    console.log('初始化');
    this.actionType = this.$route.query.type;
    this.getAllParentPackage();
    this.getAssistantList();
    this.roleType = getCookie("roleType");
    this.roleType = parseInt(this.roleType);
    //不是新建的类型需要获取当前子包的详情
    if (this.actionType === "detail" || this.actionType === "edit") {
      getsubpackage({ id: this.$route.query.id }).then(res => {
        this.form = {
          subPackageName: res.data.subpackagename,
          parentPackageId: res.data.parentpackageid,
          remark: res.data.remark,
          h5url: res.data.h5url,
          officialUrl: res.data.officialurl,
          thirdApiKey: res.data.thirdapikey,
          assistantAgencyId: res.data.assistantagencyid,
          assistantId: res.data.assistantid,
          thirdApiType: res.data.thirdapitype,
          groupsId: res.data.gamegroupid,
          packstatus: res.data.packstatus,
          clientType:
            res.data.clienttype === 0
              ? "PC"
              : res.data.clienttype === 1
              ? "Android"
              : res.data.clienttype === 2
              ? "IOS"
              : "其他"
        };
        this.assistantData.filter(item =>{
          if(item.id === res.data.assistantagencyid){
            this.assistantagencyname = item.username;
          }
        })
        this.assistantData.filter(item =>{
          if(item.id === res.data.assistantid){
            this.assistantname = item.username;
          }
        })
      });
    }
  },
  computed:{
    clientTypeName() {
      return function(type) {
        let typename = "";
        switch (type) {
          case 0:
            typename = "PC";
            break;
          case 1:
            typename = "Android";
            break;
          case 2:
            typename = "IOS";
            break;
        }
        return typename;
      };
    },
    thirdApiData(){
      return function(thirdApiType,thirdApiKey){
        let thirdApiName = "";
        switch(thirdApiType){
          case 1:
            thirdApiName = "友盟";
          break;
          case 2:
            thirdApiName = "热云";
          break;
        }
        if(!thirdApiName){
          return '-'
        }
        return thirdApiName+' '+thirdApiKey
      }
    }
  },
  methods: {
    //返回
    back() {
      this.$router.back();
    },
    //获取当前推广商下的所有推广员
    getAssistantList() {
      getAssistantList().then(res => {
        this.assistantData = res.data;
      });
    },
    //获取母包数据
    getAllParentPackage() {
      getAllParentPackage().then(res => {
        this.mubaoData = res.data;
      });
    },
    //选择母包时自动填入对应的分组信息/类型信息
    mubaoChange(val) {
      this.mubaoData.forEach(x => {
        if (x.id === val) {
          this.form.groups = x.gamegroupname;
          this.form.groupsId = x.gamegroupid;
          this.form.clientType =
            x.clienttype === 0
              ? "PC"
              : x.clienttype === 1
              ? "Android"
              : x.clienttype === 2
              ? "IOS"
              : "其他";
        }
      });
    },
    thirdApiChange(){
      console.log(this.$refs['form'])
      this.form.thirdApiKey = '';
      this.$refs['form'].clearValidate('thirdApiKey');
    },
    cancel() {
      this.$router.back();
    },
    edit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = {
            id: this.$route.query.id,
            subPackageName: this.form.subPackageName,
            assistantId: this.form.assistantId,
            parentPackageId: this.form.parentPackageId,
            assistantAgencyId: this.form.assistantAgencyId,
            officialUrl: this.form.officialUrl,
            thirdApiType: this.form.thirdApiType,
            thirdApiKey: this.form.thirdApiKey,
            h5url: this.form.h5url,
            remark: this.form.remark
          };
          modifySubPackage(params).then(res => {
            this.$message({
              message: "子包编辑成功！",
              type: "success"
            });
            this.$router.back();
          });
        }
      });
    },
    create() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = {
            SubPackageName: this.form.subPackageName,
            AssistantId: this.form.assistantId,
            thirdApiType: this.form.thirdApiType,
            thirdApiKey: this.form.thirdApiKey,
            ParentPackageId: this.form.parentPackageId,
            // assistantAgencyId: 0,
            OfficialUrl: this.form.officialUrl,
            H5url: this.form.h5url,
            Remark: this.form.remark,
            assistantAgencyId:this.form.assistantAgencyId,
          };
          createChild(params).then(res => {
            if(res.code === 0){
              this.$message({
                message: "子包新建成功！",
                type: "success"
              });
              this.$router.back();
            }else{
              this.$message.error(res.message);
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.child_create {
  .lander_detail_back .icon {
    width: 24px;
    height: 24px;
    vertical-align: top;
    margin-right: 10px;
    cursor: pointer;
  }
  .top_treadcrumb {
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #141414;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: 600;
  }
  .child_content {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 28px 32px 0 32px;
    margin: 0 0 16px 0;
    margin-top: 21px;
  }
  .small_btn {
    width: 14px;
    height: 14px;
    color: #fff;
    box-sizing: border-box;
    line-height: 14px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
  }
  .add_btn {
    background: var(--themeColor);
    margin: 0 16px;
  }
  .reduce_btn {
    background: var(--themeColor);
  }
  .care_item {
    margin-bottom: 22px;
  }
  .tips {
    p {
      line-height: 18px;
      span {
        color: #e02020;
      }
    }
  }
  .detail_item {
    margin-bottom: 0px;
  }
  .demo-form-inline{
    margin-bottom: 20px;
    display: inline-block;
  }
}
</style>
